<template>
	<div class="reply">
		<div class="radio-box" v-for="(item,index) in radios" :key="item.id">
			<image :src="item.isChecked?item.srcindex:item.src" class="input-radio" @click="check(index)">{{item.label}}
			</image>
		</div>
	</div>
</template>

<script>
	export default {
		name: "mradio",
		props: {
			// radio:String
		},

		data() {
			return {
				radio: '1',
				radios: [{
						label: '好评',
						value: '1',
						isChecked: false,
						src: "/static/img/good.svg",
						srcindex: "/static/img/goodred.svg"
					},
					{
						label: '中评',
						value: '2',
						isChecked: false,
						src: "/static/img/diff.svg",
						srcindex: "/static/img/diffred.svg"
					},
					{
						label: '差评',
						value: '3',
						isChecked: false,
						src: "/static/img/diff.svg",
						srcindex: "/static/img/diffred.svg"
					},
				]
			}
		},

		computed: {

		},
		methods: {
			check(index) {
				// 先取消所有选中项
				this.radios.forEach((item) => {
					item.isChecked = false;
				});
				//再设置当前点击项选中
				this.radio = this.radios[index].value;
				// 设置值，以供传递
				this.radios[index].isChecked = true;
				// this.$emit("input", this.radio);
				// this.$emit("change", this.radio);
				// console.log(this.radios[index]);

				//给v-model赋值
				this.$emit("input", this.radio);
				//事件
				this.$emit("change", this.radio);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.radio-box {
		display: inline-block;
		position: relative;
		height: 35rpx;
		line-height: 35rpx;
		margin-right: 35rpx;
	}

	.radio {
		display: inline-block;
		width: 35rpx;
		height: 35rpx;
		vertical-align: middle;
		cursor: pointer;
		background-image: url(/static/img/good.svg);
		background-repeat: no-repeat;
		background-position: 0 0;
	}

	.input-radio {
		width: 35rpx;
		height: 35rpx;
		vertical-align: text-top;
		vertical-align: middle;
		vertical-align: text-bottom;
	}




	.on {
		// background-position: -25rpx 0;
	}
</style>
